<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $t['siteTitle']; ?></title>
    <meta name="description" content="<?php echo $t['metaDescription']; ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C87941',
                        secondary: '#5D3891',
                        accent: '#F99417',
                        dark: '#1A120B',
                        light: '#FFFADD',
                        magic: '#662549'
                    },
                    fontFamily: {
                        fantasy: ['"Cinzel"', '"MedievalSharp"', '"Times New Roman"', 'serif']
                    },
                    boxShadow: {
                        'magic': '0 0 15px rgba(102, 37, 73, 0.3)',
                        'glow': '0 0 20px rgba(249, 148, 23, 0.5)'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .text-shadow-glow {
                text-shadow: 0 0 10px rgba(249, 148, 23, 0.7);
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235d3891' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }
            .border-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264.888-.14 1.24.916 1.9 2.376 2.25 3.935h6.747c-.35-1.56-1.01-2.995-2.25-3.935.168-.125.531 0 .888.14C35.342 20.289 39.268 21 44 21c4.734 0 8.658-.711 12.666-2h6.747C62.658 20.289 66.582 21 71.316 21c4.734 0 8.658-.711 12.666-2h6.747C89.658 20.289 93.582 21 98.316 21v-2c-4.734 0-8.658-.711-12.666-2h-6.747c4.008-1.289 7.933-2 12.666-2v-2c-4.734 0-8.658-.711-12.666-2h-6.747c4.008-1.289 7.933-2 12.666-2v-2c-4.734 0-8.658-.711-12.666-2h-6.747c4.008-1.289 7.933-2 12.666-2v-2c-4.734 0-8.658-.711-12.666-2h-6.747c4.008-1.289 7.933-2 12.666-2v-2H21.184v2c4.734 0 8.658.711 12.666 2h6.747c-4.008 1.289-7.933 2-12.666 2v2c4.734 0 8.658.711 12.666 2h6.747c-4.008 1.289-7.933 2-12.666 2v2c4.734 0 8.658.711 12.666 2h6.747c-4.008 1.289-7.933 2-12.666 2v2c4.734 0 8.658.711 12.666 2h6.747c-4.008 1.289-7.933 2-12.666 2v2h-6.747c-4.008-1.289-7.933-2-12.666-2v-2c4.734 0 8.658-.711 12.666-2h-6.747c-4.008 1.289-7.933 2-12.666 2v-2c4.734 0 8.658-.711 12.666-2h-6.747c-4.008 1.289-7.933 2-12.666 2v-2c4.734 0 8.658-.711 12.666-2h-6.747c-4.008 1.289-7.933 2-12.666 2v-2H21.184z' fill='%23c87941' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
            .character-card {
                transition: transform 0.5s ease, box-shadow 0.5s ease;
            }
            .character-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
            }
            .btn-magic {
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }
            .btn-magic::after {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: linear-gradient(
                    to right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                transform: rotate(30deg);
                animation: shine 3s infinite;
            }
            @keyframes shine {
                0% { transform: translateX(-100%) rotate(30deg); }
                100% { transform: translateX(100%) rotate(30deg); }
            }
            .scroll-reveal {
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }
            .scroll-reveal.active {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-light bg-pattern font-fantasy">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-dark/80 backdrop-blur-md border-b border-primary/30">
        <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
            <!-- 游戏Logo -->
            <a href="#" class="flex items-center gap-2 text-2xl font-bold text-accent">
                <i class="fa fa-shield text-primary text-3xl"></i>
                <span><?php echo $t['siteTitle']; ?></span>
            </a>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-light text-2xl">
                <i class="fa fa-bars"></i>
            </button>
            
            <!-- 导航菜单 -->
            <nav id="main-nav" class="hidden w-full md:flex md:w-auto mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row gap-2 md:gap-6">
                    <?php foreach($t['nav'] as $item) : ?>
                        <li>
                            <a href="<?php echo $item['link']; ?>" class="block py-2 px-3 rounded 
                                <?php echo isset($item['isCta']) ? 'bg-accent text-dark font-bold shadow-glow' : 'text-light hover:bg-primary/20 border border-primary/30'; ?>">
                                <?php echo $item['name']; ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                    
                    <!-- 语言切换 -->
                    <li class="relative group">
                        <a href="#" class="block py-2 px-3 rounded hover:bg-primary/20 border border-primary/30 flex items-center gap-1">
                            <i class="fa fa-globe"></i>
                            <span><?php echo $t['lang'][$lang]; ?></span>
                            <i class="fa fa-chevron-down text-xs"></i>
                        </a>
                        <ul class="absolute right-0 mt-2 w-36 bg-dark border border-primary/30 rounded py-2 hidden group-hover:block z-50">
                            <?php foreach($t['lang'] as $code => $name) : ?>
                                <li>
                                    <a href="?lang=<?php echo $code; ?>" class="block px-4 py-2 hover:bg-primary/20 <?php echo $lang == $code ? 'bg-primary/20 font-bold' : ''; ?>">
                                        <?php echo $name; ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <!-- 英雄区域 -->
        <section id="hero" class="relative overflow-hidden py-16 md:py-24">
            <div class="absolute inset-0 z-0">
                <img src="https://picsum.photos/id/15/1920/1080" alt="魔幻背景" class="w-full h-full object-cover opacity-40">
                <div class="absolute inset-0 bg-gradient-to-b from-dark/70 via-dark/50 to-dark"></div>
            </div>
            <div class="container mx-auto px-4 relative z-10">
                <div class="flex flex-col md:flex-row items-center gap-8 md:gap-16">
                    <div class="w-full md:w-1/2 text-center md:text-left">
                        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-shadow-glow mb-6 text-accent">
                            <?php echo $t['hero']['title']; ?>
                        </h1>
                        <p class="text-lg md:text-xl mb-8 text-gray-300 max-w-lg mx-auto md:mx-0 leading-relaxed">
                            <?php echo $t['hero']['subtitle']; ?>
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                            <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="btn-magic bg-accent hover:bg-amber-500 text-dark font-bold py-3 px-8 rounded shadow-glow text-lg flex items-center justify-center gap-2">
                                <?php echo $t['hero']['cta1']['text']; ?>
                                <i class="fa fa-star"></i>
                            </a>
                            <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="btn-magic bg-transparent hover:bg-white/10 text-light border border-accent/50 font-bold py-3 px-8 rounded shadow-magic text-lg flex items-center justify-center gap-2">
                                <i class="fa <?php echo $t['hero']['cta2']['icon']; ?>"></i>
                                <?php echo $t['hero']['cta2']['text']; ?>
                            </a>
                        </div>
                        <p class="mt-6 text-sm text-gray-400 font-bold border border-accent/30 inline-block px-4 py-2 rounded-full">
                            <i class="fa fa-calendar text-accent mr-2"></i> <?php echo $t['hero']['version']; ?>
                        </p>
                    </div>
                    <div class="w-full md:w-1/2 relative">
                        <div class="relative rounded-lg overflow-hidden shadow-2xl border-2 border-accent/50 transform transition-all duration-700 hover:shadow-glow">
                            <img src="https://picsum.photos/id/237/600/500" alt="游戏宣传图" class="w-full h-auto">
                            <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-dark/20 to-transparent"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-6">
                                <div class="flex items-center gap-2 text-accent text-shadow-glow">
                                    <i class="fa fa-diamond"></i>
                                    <span class="font-bold text-lg"><?php echo $t['hero']['version']; ?></span>
                                </div>
                            </div>
                        </div>
                        <!-- 装饰元素 -->
                        <div class="absolute -top-6 -right-6 w-20 h-20 bg-magic rounded-full opacity-60 animate-pulse"></div>
                        <div class="absolute -bottom-8 -left-8 w-16 h-16 bg-primary rounded-full opacity-50 animate-pulse" style="animation-delay: 1s"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 游戏特色 -->
        <section id="features" class="py-16 bg-dark relative">
            <div class="absolute top-0 left-0 right-0 h-16 border-pattern"></div>
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-accent text-shadow-glow">
                        <?php echo $t['features']['title']; ?>
                    </h2>
                    <p class="text-gray-400 max-w-2xl mx-auto text-lg">
                        <?php echo $t['features']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php $delay = 0; foreach($t['features']['items'] as $feature) : $delay += 100; ?>
                        <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                            <div class="bg-dark/50 border border-primary/30 rounded-lg p-6 shadow-magic hover:shadow-glow transition-all duration-500 h-full">
                                <div class="w-14 h-14 bg-magic/20 rounded-full flex items-center justify-center mb-5 border border-accent/30">
                                    <i class="fa <?php echo $feature['icon']; ?> text-2xl text-accent"></i>
                                </div>
                                <h3 class="text-xl font-bold mb-3 text-accent"><?php echo $feature['title']; ?></h3>
                                <p class="text-gray-400 leading-relaxed"><?php echo $feature['desc']; ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-16 border-pattern transform rotate-180"></div>
        </section>

        <!-- 角色介绍 -->
        <section id="characters" class="py-16 bg-gradient-to-b from-dark to-dark/90">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary text-shadow">
                        <?php echo $t['characters']['title']; ?>
                    </h2>
                    <p class="text-gray-400 max-w-2xl mx-auto text-lg">
                        <?php echo $t['characters']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php $delay = 0; foreach($t['characters']['items'] as $character) : $delay += 150; ?>
                        <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                            <div class="character-card bg-dark/60 border border-primary/30 rounded-lg overflow-hidden shadow-lg">
                                <div class="relative h-64 overflow-hidden">
                                    <img src="<?php echo $character['image']; ?>" alt="<?php echo $character['alt']; ?>" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent"></div>
                                    <div class="absolute top-3 right-3 bg-magic/80 text-light text-sm font-bold px-3 py-1 rounded-full border border-accent/30">
                                        <?php echo $character['class']; ?>
                                    </div>
                                </div>
                                <div class="p-5">
                                    <h3 class="text-xl font-bold mb-2 text-accent border-b border-primary/20 pb-2"><?php echo $character['name']; ?></h3>
                                    <p class="text-gray-400 text-sm leading-relaxed mt-3"><?php echo $character['desc']; ?></p>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12 scroll-reveal">
                    <a href="#" class="inline-flex items-center gap-2 text-accent font-bold hover:text-amber-400 transition-colors border-b border-accent/30 pb-1">
                        <?php echo $t['characters']['moreLink']; ?>
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 游戏截图 -->
        <section id="screenshots" class="py-16 bg-dark relative">
            <div class="absolute top-0 left-0 right-0 h-16 border-pattern"></div>
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-accent text-shadow-glow">
                        <?php echo $t['screenshots']['title']; ?>
                    </h2>
                    <p class="text-gray-400 max-w-2xl mx-auto text-lg">
                        <?php echo $t['screenshots']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <?php $delay = 0; foreach($t['screenshots']['items'] as $screenshot) : $delay += 100; ?>
                        <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                            <div class="group relative rounded overflow-hidden shadow-lg border border-primary/20 hover:border-accent/50 transition-all duration-500">
                                <img src="<?php echo $screenshot['image']; ?>" alt="<?php echo $screenshot['alt']; ?>" class="w-full h-48 object-cover transition-transform duration-700 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-dark/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                                    <p class="p-3 text-sm text-light"><?php echo $screenshot['alt']; ?></p>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12 scroll-reveal">
                    <a href="#" class="inline-flex items-center gap-2 text-accent font-bold hover:text-amber-400 transition-colors border-b border-accent/30 pb-1">
                        <?php echo $t['screenshots']['moreLink']; ?>
                        <i class="fa fa-picture-o"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 游戏预告片 -->
        <section id="trailer" class="py-16 bg-gradient-to-br from-magic/20 to-secondary/20">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-accent text-shadow-glow">
                        <?php echo $t['trailer']['title']; ?>
                    </h2>
                    <p class="text-gray-400 max-w-2xl mx-auto text-lg">
                        <?php echo $t['trailer']['subtitle']; ?>
                    </p>
                </div>

                <div class="max-w-4xl mx-auto relative rounded-lg overflow-hidden shadow-2xl group scroll-reveal border border-accent/30">
                    <img src="<?php echo $t['trailer']['image']; ?>" alt="<?php echo $t['trailer']['alt']; ?>" class="w-full h-auto">
                    <div class="absolute inset-0 bg-dark/50 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity">
                        <button class="w-20 h-20 md:w-24 md:h-24 bg-accent rounded-full flex items-center justify-center shadow-lg transform group-hover:scale-110 transition-transform border-4 border-white/30">
                            <i class="fa fa-play text-dark text-3xl md:text-4xl ml-1"></i>
                        </button>
                    </div>
                    <div class="absolute bottom-4 right-4 bg-dark/80 text-light text-sm px-3 py-1 rounded-full flex items-center gap-2 border border-primary/30">
                        <i class="fa fa-clock-o text-accent"></i>
                        <span><?php echo $t['trailer']['duration']; ?></span>
                    </div>
                    <div class="absolute top-4 left-4 bg-magic/80 text-light text-sm px-3 py-1 rounded-full border border-accent/30">
                        <?php echo $t['trailer']['released']; ?>
                    </div>
                </div>
            </div>
        </section>

        <!-- 社区论坛 -->
        <section id="forum" class="py-16 bg-dark relative">
            <div class="absolute top-0 left-0 right-0 h-16 border-pattern"></div>
            <div class="container mx-auto px-4">
                <div class="text-center mb-12 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary text-shadow">
                        <?php echo $t['forum']['title']; ?>
                    </h2>
                    <p class="text-gray-400 max-w-2xl mx-auto text-lg">
                        <?php echo $t['forum']['subtitle']; ?>
                    </p>
                </div>

                <div class="max-w-3xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <?php $delay = 0; foreach($t['forum']['topics'] as $topic) : $delay += 150; ?>
                            <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                                <div class="bg-dark/50 border border-primary/30 rounded-lg p-6 shadow-magic hover:shadow-glow transition-all duration-500 hover:border-accent/50">
                                    <h3 class="text-xl font-bold mb-2 text-accent"><?php echo $topic['name']; ?></h3>
                                    <div class="flex justify-between items-center text-sm text-gray-400 mt-4">
                                        <span class="flex items-center gap-1">
                                            <i class="fa fa-comment-o text-primary"></i> 
                                            <?php echo $topic['count']; ?> 
                                            <?php echo $lang == 'zh' ? '个主题' : ($lang == 'ja' ? '件のトピック' : ($lang == 'ko' ? '개의 토픽' : 'topics')); ?>
                                        </span>
                                        <span class="flex items-center gap-1">
                                            <i class="fa fa-clock-o text-primary"></i> 
                                            <?php echo $topic['lastPost']; ?>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <div class="text-center mt-10 scroll-reveal">
                        <a href="#" class="btn-magic inline-block bg-secondary hover:bg-purple-700 text-light font-bold py-3 px-8 rounded shadow-magic border border-accent/30">
                            <?php echo $t['forum']['cta']; ?>
                            <i class="fa fa-comments ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 最新动态 -->
        <section id="news" class="py-16 bg-gradient-to-b from-dark to-dark/90">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-accent text-shadow-glow">
                        <?php echo $t['news']['title']; ?>
                    </h2>
                    <p class="text-gray-400 max-w-2xl mx-auto text-lg">
                        <?php echo $t['news']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <?php $delay = 0; foreach($t['news']['items'] as $news) : $delay += 200; ?>
                        <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                            <article class="bg-dark/60 border border-primary/30 rounded-lg overflow-hidden shadow-lg hover:shadow-glow hover:border-accent/50 transition-all duration-500 h-full flex flex-col">
                                <div class="h-48 overflow-hidden">
                                    <img src="<?php echo $news['image']; ?>" alt="" class="w-full h-full object-cover hover:scale-110 transition-transform duration-700">
                                </div>
                                <div class="p-6 flex flex-col flex-grow">
                                    <div class="flex justify-between items-center mb-3 text-sm">
                                        <span class="bg-secondary/30 text-accent px-3 py-1 rounded-full border border-secondary/50">
                                            <?php echo $news['category']; ?>
                                        </span>
                                        <span class="text-gray-500"><i class="fa fa-calendar-o mr-1 text-primary"></i> <?php echo $news['date']; ?></span>
                                    </div>
                                    <h3 class="text-xl font-bold mb-3 text-light"><?php echo $news['title']; ?></h3>
                                    <p class="text-gray-400 text-sm mb-4 flex-grow leading-relaxed">
                                        <?php echo $news['desc']; ?>
                                    </p>
                                    <a href="#" class="inline-flex items-center text-accent font-bold hover:text-amber-400 transition-colors mt-auto">
                                        <?php echo $t['readMore']; ?>
                                        <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            </article>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12 scroll-reveal">
                    <a href="#" class="inline-flex items-center gap-2 text-accent font-bold hover:text-amber-400 transition-colors border-b border-accent/30 pb-1">
                        <?php echo $t['news']['moreLink']; ?>
                        <i class="fa fa-newspaper-o"></i>
                    </a>
                </div>
            </div>
        </section>
        <!-- 购买区域 -->
        <?php if(isset($t['purchase'])){?>
        <section id="purchase" class="py-20 bg-dark relative overflow-hidden">
            <div class="absolute inset-0 z-0 opacity-20">
                <img src="https://picsum.photos/id/60/1920/1080" alt="魔兽世界购买背景" class="w-full h-full object-cover">
            </div>
            
            <div class="container mx-auto px-4 relative z-10">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['purchase']['title']; ?></h2>
                    <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['purchase']['subtitle']; ?></p>
                </div>
                
                <!-- 版本选择 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
                    <?php foreach ($t['purchase']['versions'] as $version): ?>
                        <div class="bg-dark/70 rounded-lg overflow-hidden border border-gray-800 transition-all transform hover:-translate-y-2 hover:shadow-xl <?php echo isset($version['featured']) ? 'border-accent/50 relative scale-105 z-10' : ''; ?>">
                            <?php if (isset($version['featured'])): ?>
                                <div class="bg-accent text-dark text-center py-1 font-bold text-sm">
                                    推荐选择
                                </div>
                            <?php endif; ?>
                            
                            <div class="p-8">
                                <h3 class="text-xl font-bold mb-4"><?php echo $version['name']; ?></h3>
                                <div class="text-3xl font-bold mb-6 text-accent">
                                    <?php echo $version['price']; ?>
                                </div>
                                
                                <ul class="space-y-3 mb-8">
                                    <?php foreach ($version['includes'] as $item): ?>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-green-400 mt-1 mr-3"></i>
                                            <span><?php echo $item; ?></span>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                                
                                <a href="#" class="block w-full py-3 text-center bg-secondary hover:bg-secondary/80 text-white font-bold rounded transition-colors">
                                    <?php echo $version['cta']; ?>
                                </a>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                
                <!-- 游戏时间购买 -->
                <div>
                    <h3 class="text-2xl font-fantasy font-bold text-center mb-10"><?php echo $t['purchase']['gameTime']['title']; ?></h3>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-3xl mx-auto">
                        <?php foreach ($t['purchase']['gameTime']['options'] as $option): ?>
                            <div class="bg-dark/60 rounded-lg p-6 border border-gray-800 text-center hover:border-accent/50 transition-all">
                                <div class="text-2xl font-bold mb-2"><?php echo $option['duration']; ?></div>
                                <div class="text-xl text-accent font-bold mb-6"><?php echo $option['price']; ?></div>
                                <a href="#" class="inline-block px-6 py-2 bg-primary hover:bg-primary/80 rounded transition-colors">
                                    <?php echo $option['cta']; ?>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </section>
        <?php }?>
        <!-- 预注册 -->
        <?php if(isset($t['preRegister'])){?>
        <section id="pre-register" class="py-16 bg-gradient-to-br from-magic/30 to-secondary/30 relative overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
                <div class="absolute -top-10 -left-10 w-40 h-40 bg-accent/10 rounded-full"></div>
                <div class="absolute top-1/3 -right-20 w-60 h-60 bg-magic/20 rounded-full"></div>
                <div class="absolute -bottom-20 left-1/4 w-52 h-52 bg-primary/10 rounded-full"></div>
            </div>

            <div class="container mx-auto px-4 relative z-10">
                <div class="max-w-6xl mx-auto bg-dark/80 rounded-lg shadow-xl overflow-hidden border border-accent/30 scroll-reveal">
                    <div class="flex flex-col md:flex-row">
                        <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                            <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-accent text-shadow-glow">
                                <?php echo $t['preRegister']['title']; ?>
                            </h2>
                            <p class="text-gray-400 mb-8 leading-relaxed">
                                <?php echo $t['preRegister']['subtitle']; ?>
                            </p>

                            <form class="space-y-4">
                                <div>
                                    <label for="name" class="block text-sm font-bold text-gray-300 mb-1">
                                        <?php echo $t['preRegister']['form']['name']; ?>
                                    </label>
                                    <input type="text" id="name" placeholder="<?php echo $t['preRegister']['form']['placeholderName']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/30 focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none transition text-light">
                                </div>
                                <div>
                                    <label for="phone" class="block text-sm font-bold text-gray-300 mb-1">
                                        <?php echo $t['preRegister']['form']['phone']; ?>
                                    </label>
                                    <input type="tel" id="phone" placeholder="<?php echo $t['preRegister']['form']['placeholderPhone']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/30 focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none transition text-light">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-bold text-gray-300 mb-1">
                                        <?php echo $t['preRegister']['form']['email']; ?>
                                    </label>
                                    <input type="email" id="email" placeholder="<?php echo $t['preRegister']['form']['placeholderEmail']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/30 focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none transition text-light">
                                </div>
                                <div class="flex items-start">
                                    <input type="checkbox" id="agreement" class="mt-1 accent-accent">
                                    <label for="agreement" class="ml-2 text-sm text-gray-400">
                                        <?php echo $t['preRegister']['form']['agreement']; ?>
                                    </label>
                                </div>
                                <button type="submit" class="btn-magic w-full bg-accent hover:bg-amber-500 text-dark font-bold py-3 px-6 rounded-lg shadow-glow text-lg">
                                    <?php echo $t['preRegister']['form']['submit']; ?>
                                    <i class="fa fa-paper-plane ml-2"></i>
                                </button>
                            </form>

                            <div class="mt-6 bg-magic/20 border border-magic/40 rounded-lg p-4 flex items-start">
                                <i class="fa fa-gift text-accent text-xl mt-1 mr-3"></i>
                                <p class="text-sm text-gray-300 font-bold">
                                    <?php echo $t['preRegister']['gift']; ?>
                                </p>
                            </div>
                        </div>

                        <div class="w-full md:w-1/2 bg-gradient-to-br from-secondary/40 to-magic/40 p-8 md:p-12 text-light flex flex-col justify-center border-t md:border-t-0 md:border-l border-primary/30">
                            <h3 class="text-2xl font-bold mb-8 text-center text-accent">
                                <i class="fa fa-bar-chart mr-2"></i> <?php echo $lang == 'zh' ? '游戏数据' : ($lang == 'ja' ? 'ゲームデータ' : ($lang == 'ko' ? '게임 데이터' : 'Game Stats')); ?>
                            </h3>

                            <div class="grid grid-cols-2 gap-6 text-center">
                                <?php foreach($t['preRegister']['stats'] as $stat) : ?>
                                    <div class="bg-dark/30 backdrop-blur-sm rounded-lg p-5 border border-accent/20 hover:border-accent/50 transition-colors">
                                        <div class="text-3xl md:text-4xl font-bold mb-2 text-accent text-shadow-glow">
                                            <?php echo $stat['value']; ?>
                                        </div>
                                        <div class="text-sm md:text-base text-gray-300">
                                            <?php echo $stat['label']; ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>

                            <div class="mt-12 border border-primary/30 rounded-lg overflow-hidden shadow-lg">
                                <img src="https://picsum.photos/id/239/400/200" alt="游戏角色" class="w-full h-auto">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <?php }?>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark border-t border-primary/30 py-12 relative">
        <div class="absolute top-0 left-0 right-0 h-16 border-pattern"></div>
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-10">
                <div class="md:col-span-1">
                    <div class="flex items-center gap-2 text-2xl font-bold text-accent mb-4">
                        <i class="fa fa-shield"></i>
                        <span><?php echo $t['siteTitle']; ?></span>
                    </div>
                    <p class="text-gray-500 mb-6 leading-relaxed">
                        <?php echo $t['footer']['description']; ?>
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-dark border border-primary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark border border-primary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark border border-primary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark border border-primary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>

                <div class="md:col-span-2">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
                        <?php foreach($t['footer']['links'] as $linkGroup) : ?>
                            <div>
                                <h4 class="text-lg font-bold mb-4 text-accent"><?php echo $linkGroup['title']; ?></h4>
                                <ul class="space-y-2">
                                    <?php foreach($linkGroup['items'] as $item) : ?>
                                        <li>
                                            <a href="<?php echo $item['link']; ?>" class="text-gray-500 hover:text-accent transition-colors flex items-center gap-1">
                                                <i class="fa fa-angle-right text-xs text-primary"></i>
                                                <?php echo $item['name']; ?>
                                            </a>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="md:col-span-1">
                    <h4 class="text-lg font-bold mb-4 text-accent"><?php echo $t['footer']['subscribe']; ?></h4>
                    <p class="text-gray-500 mb-4 text-sm leading-relaxed">
                        <?php echo $t['footer']['subscribeDesc']; ?>
                    </p>
                    <form class="mb-3">
                        <div class="flex">
                            <input type="email" placeholder="<?php echo $t['footer']['subscribePlaceholder']; ?>" 
                                class="flex-1 px-4 py-2 rounded-l-lg focus:outline-none bg-dark border border-primary/30 focus:border-accent text-light">
                            <button type="submit" class="bg-accent hover:bg-amber-500 px-4 py-2 rounded-r-lg transition-colors text-dark">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                    <p class="text-gray-600 text-xs">
                        <?php echo $t['footer']['privacyNote']; ?>
                    </p>
                </div>
            </div>

            <div class="border-t border-primary/20 pt-6">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-600 text-sm mb-4 md:mb-0">
                        <?php echo $t['footer']['copyright']; ?>
                    </p>
                    <div class="flex gap-4 text-sm flex-wrap justify-center">
                        <?php foreach($t['footer']['legalLinks'] as $link) : ?>
                            <a href="<?php echo $link['link']; ?>" class="text-gray-600 hover:text-accent transition-colors px-2 py-1">
                                <?php echo $link['name']; ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const nav = document.getElementById('main-nav');
            nav.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    document.getElementById('main-nav').classList.add('hidden');
                }
            });
        });

        // 滚动时导航栏样式变化
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow-lg', 'bg-dark/90');
                header.classList.remove('py-3', 'bg-dark/80');
            } else {
                header.classList.add('py-3', 'bg-dark/80');
                header.classList.remove('py-2', 'shadow-lg', 'bg-dark/90');
            }
        });

        // 滚动显示动画
        function checkScroll() {
            const elements = document.querySelectorAll('.scroll-reveal');
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                if (elementPosition < windowHeight - 100) {
                    element.classList.add('active');
                }
            });
        }

        // 初始检查
        window.addEventListener('load', checkScroll);
        // 滚动时检查
        window.addEventListener('scroll', checkScroll);
    </script>
</body>
</html>
    